<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em</title>
    <style>
        .p1 {font-size: 16px; line-height: 32px;}
        .s1 {font-size: 2em;}
        .s2 {font-size: 2em; line-height: 2em;}

        .p2 {font-size: 16px; line-height: 2;}
        .s5 {font-size: 2em;}
        .s6 {font-size: 2em; line-height: 2em;}
    </style>
</head>
<body>    
    <div class="p1">
        <div class="s1">1</div>
        <div class="s2">1</div>
    </div>
    <div class="p2">
        <div class="s5">1</div>
        <div class="s6">1</div>
    </div>

    <!-- 
        em：用在font-size属性时，相对于父元素字体大小；用在非字体大小属性时，相对于自身字体大小
    -->
    

    <!-- 问：s1、s2、s5、s6的font-size和line-height是多少？ -->
    <!-- 
        p1: font-size: 16px, line-height: 32px
        s1: font-size: 32px, line-height: 32px （因为em作为font-size单位时相对于父元素字体大小，所以是32px；line-height继承父元素的。）
        s2: font-size: 32px, line-height: 64px （因为em作为line-height单位，相对于自身字体大小，所以是64px。）
     -->
     <!-- 
         p2: font-size: 16px, line-height: 32px （因为line-height值为2，没有单位，相对于自身字体大小，所以是16*2=32px。）
         s5: font-size: 32px, line-height: 64px （因为line-height继承值为2，相对于自身字体大小，所以是64px。）         
         s6: font-size: 32px, line-height: 64px
      -->

      
</body>
</html>